<template>
  <a-layout id="layout">
    <a-layout-header class="header" style="padding: 0">
<!--      <div class="logo" />-->
      <a-menu
        theme="dark"
        mode="horizontal"
      >
        <a-menu-item id="key1" key="1">
          <img id="logo-img" src="../assets/logo.png" alt="logo" />
          远程问诊系统</a-menu-item>
        <a-menu-item id='key2' key="2">欢迎: {{ userName }}({{ userId }})</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>
      <Asider></Asider>
      <a-layout>
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '350px' }"
        >
        <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { onMounted, ref } from 'vue';
import Asider from '../components/Sider.vue';
export default{
  components: {
    Asider
  },

  setup() {
    onMounted(()=>{
    })
    return {
      selectedKeys1: ref(['2']),
      collapsed: ref(false),
      userName: ref(sessionStorage.getItem('name')),
      userId: ref(sessionStorage.getItem('userId'))
    };
  },
};
</script>
<style>

#layout{
  width: 100%;
  height: 50px;
}
.header{
  width: 100%;
}
.logo{
  width: 100%;
}

#key1{
  line-height: 64px;
  font-size: 20px;
  font-family: 宋体;
  /*right:20px;*/
  padding: 0;
  /*bottom: 60px;*/
}

#logo-img{
  width: 50px;
  height: 50px;
  /*float: left;*/
  top: -10px;
  /*padding-top: ;*/
}

#key2{
  line-height: 64px;
  font-size: 15px;
  font-family: 宋体;
  left: 1100px;
}
</style>
